<template>
  <div id="fromEcharts"  style="height:170px;"></div>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        props:{
            data:{
                type:Array,
                default:new Array()
            }
        },
        data() {
            return {
                fromEcharts: null
            }
        },
        created() {

            this.data.map(i=>{
                i.value = i.singular;
                i.name = i.gameName;
            });

            this.$nextTick(() => {
                this.fromEcharts = echarts.init(document.getElementById('fromEcharts'), "macarons");
                this.fromEcharts.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                    },
                    series: [{
                        name: "账号来源",
                        type: "pie",
                        data: this.data,
                        animationEasing: "cubicInOut",
                        animationDuration: 1000,
                    }]
                });
                let that = this;
                window.addEventListener('resize', () => {
                    that.fromEcharts.resize()
                });
            })
        }
    }
</script>
